import React, { Component } from 'react';
import { Grid, Select, DatePicker } from '@alifd/next';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import ReactEcharts from 'echarts-for-react';
import PageHead from '../../../../components/PageHead';
import service from '../../../../utils/service';
import api from '../../../../utils/api';
import { ZZTime } from '../../../../utils/setting';

const { Row, Col } = Grid;
const { YearPicker } = DatePicker;
export default class chooseHead extends Component {
  static displayName = '筛选条件';
  static propTypes = {};
  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      FilterData: {
        time: '',
        class_id: '',
        Y: '',
        type: '',
      },
      dataSource: [],
      optionZZ: {},
      GoodsTypeList: [],
      // storeList: [],

    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.storeList && nextProps.GoodsTypeList) {
      this.setState(
        {
          GoodsTypeList: nextProps.GoodsTypeList,
          // storeList: nextProps.storeList,
        }
      );
    }
  }
  formChange = (value) => {
    const filterData = { ...value };
    if (filterData.time) {
      filterData.Y = new Date(value.time).getFullYear().toString();
    } else {
      filterData.Y = '';
    }
    delete filterData.time;
    this.setState({
      FilterData: filterData,
    }, () => {
      const echarts_instance = this.echarts_react_ZZ.getEchartsInstance();
      echarts_instance.showLoading();
      this.getDate();
    }
    );
  };

  //  获取数据
  getDate= () => {
    const FilterData = { ...this.state.FilterData };
    if (FilterData.time) {
      delete FilterData.time;
    }
    service({
      method: 'get',
      url: api.DataZZ,
      params: FilterData,
    })
      .then((res) => {
        if (res.status === 200) {
          this.setState(
            {
              dataSource: res.data,
            }, () => {
              this.SetOptionZZ();
            }
          );
          // }
        }
      });
  }
  componentDidMount() {
    this.getDate();
  }
  SetOptionZZ = () => {
    const data = this.state.dataSource;
    data.sort((a, b) => {
      return b[1] - a[1];
    });
    const count = data.length;
    const { FilterData, GoodsTypeList } = this.state;
    let title = '全部';
    let subTitle = '当前季度';
    GoodsTypeList.forEach((item) => {
      if (item.value == FilterData.class_id) {
        title = item.label;
      }
    });
    ZZTime.forEach((item) => {
      if (item.value == FilterData.type) {
        subTitle = item.label;
      }
    });
    let option = {};
    option = {
      title: {
        text: `类别：${title}`,
        subtext: `季度：${subTitle}`,
        // x: 'center',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        // data: dataName,
      },
      grid: {
        left: '2%',
        right: '4%',
        bottom: '3%',
        top: '80px',
        containLabel: true,
      },
      toolbox: {
        feature: {
          mark: { show: true },
          magicType: {
            show: true,
            type: ['line', 'bar'],
            title: {
              bar: '折线图切换',
            },
          },
          restore: { show: true },
          saveAsImage: {},
        },
      },
      yAxis: { type: 'category', nameTextStyle: { width: '20', interval: '0' }, axisLabel: { rotate: '0' } },
      xAxis: {
        type: 'value',
      },
      dataset: {
        source: data,
      },
      series: [
        {
          type: 'bar',
        },
      ],
    };
    const echarts_instance = this.echarts_react_ZZ.getEchartsInstance();
    echarts_instance.hideLoading();
    echarts_instance.setOption(option);

    this.autoHeight = (count * 35) + 50 > 800 ? (count * 35) + 50 : 800; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
    echarts_instance.getDom().style.height = `${this.autoHeight}px`;
    echarts_instance.getDom().childNodes[0].style.height = `${this.autoHeight}px`;
    echarts_instance.getDom().childNodes[0].childNodes[0].setAttribute('height', this.autoHeight);
    echarts_instance.getDom().childNodes[0].childNodes[0].style.height = `${this.autoHeight}px`;
    echarts_instance.resize();
  }
  render() {
    const { optionZZ } = this.state;
    return (
      <div>
        <PageHead title="周转率" />
        <IceContainer>
          <IceFormBinderWrapper
        // value={this.state.filterData}
            onChange={this.formChange}
            ref="form"
          >
            <Row wrap gutter="4">
              <Col l="5" className="FormCol">
                <div style={styles.formItem}>
                  <span style={styles.SelectLabel}>商品类别</span>
                  <IceFormBinder name="class_id">
                    <Select autoWidth placeholder="请选择商品类别" style={styles.Select} dataSource={this.state.GoodsTypeList} size="large" hasClear />
                  </IceFormBinder>
                </div>
              </Col>
              <Col l="5" className="FormCol">
                <div style={styles.formItem}>
                  <span style={styles.SelectLabel}>季度选择</span>
                  <IceFormBinder name="type">
                    <Select placeholder="请选择季度" style={styles.Select} dataSource={ZZTime} size="large" autoWidth hasClear />
                  </IceFormBinder>
                </div>
              </Col>
              <Col l="6" className="FormCol">
                <div style={styles.formItem}>
                  <span style={styles.SelectLabel}>年度选择</span>
                  <IceFormBinder name="time">
                    <YearPicker style={styles.Select.DatePicker} size="large" />
                  </IceFormBinder>
                </div>
              </Col>
            </Row>
          </IceFormBinderWrapper>
          <ReactEcharts
            option={optionZZ}
            style={{ width: '100%', height: '600px', margin: '20px 0' }}
            theme="light"
            ref={(e) => { this.echarts_react_ZZ = e; }}
          />
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  overview: {
    h3: {
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '30px',
      fontFamily: 'SourceHanSans-Medium',
      color: '#333333',
      marginBottom: '20px',
    },
  },
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  Select: {
    float: 'right',
    width: 'calc(100% - 100px)',
    height: '38px',
    // marginRight: '40px',
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    maxWidth: '100px',
    minWidth: '60px',
  },
  Search: {
    width: '100%',
    marginLeft: '20px',
  },
  formItem: {
    display: 'flex',
    width: '100%',
    alignItems: 'center',
    margin: '10px 0',
  },
};
